<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>提交表单上传文件 （非跨域）</h1>
    <!-- 文件上传表单 提交表单完成上传    不可以跨域 只能在同一个目录下访问-->
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="myFile"><br>    <!--与upload方法参数名称一致-->
        <input type="submit" value="上传">
    </form>


    <h1>axios上传文件 （可跨域）</h1>
    <!--  通过axios上传文件  -->
    <input type="file" id="fileInput">
    <img src="" id="upFileImg">

    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <script>
                                    //onchange 选了之后就会添加到文件夹
        document.getElementById("fileInput").onchange = function (){

            //创建一个form对象
            let formData = new FormData();
            //将图片资源放进去          这里的this对应 监听id为fileInput的输入框
            formData.append('myFile',this.files[0]);

            axios({
                method:'post',
                url: 'http://localhost:8080/upload',
                data: formData
            }).then(res=>{
                console.log(res.data);
                if (res.data.code == 200){
                    document.getElementById("upFileImg").setAttribute("src",res.data.data);
                }
            })
        }



    </script>

</body>
</html>